<template>
  <div class="update-file-list-container">
    <div class="update-file-list">
      <div class="update-file-list-header">
        <div class="file-select" @click="handleSelectFile">选择文件</div>
        <div class="dir-select" @click="handleSelectDir">选择文件夹</div>
        <div v-show="fileList.length" class="dir-select" @click="updateFile">开始上传</div>
      </div>
      <div class="update-file-list-body">
        <table>
          <thead>
            <tr class="update-file-list-thead">
              <th>文件名</th>
              <th>类型</th>
              <th>大小</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in fileList" :key="item['id']">
              <td>{{ item['name'] }}</td>
              <td>{{ item['type'] }}</td>
              <td>{{ computeSize(item['size']) }}</td>
              <td v-if="item['status'] !== '上传中'">{{ item['status'] }}</td>
              <td v-else>
                <input
                  class="process-bar"
                  type="range"
                  :value="item['process']"
                  min="0"
                  max="100"
                  step="1"
                  disabled
                />
                <label for="range">{{ item['process'] }}%</label>
              </td>
              <td>
                <div class="delete-btn" @click="handleRemoveFile(index)">删除</div>
              </td>
            </tr>
          </tbody>
        </table>
        <div v-show="fileList.length === 0" class="update-file-list-no-data">
          <p>暂无数据</p>
        </div>
      </div>
      <div class="update-file-list-footer">
        <div class="tags">
          <div class="tag">
            <div class="tag-name">文件数量：</div>
            <div class="tag-value">{{ fileCount }}</div>
          </div>
          <div class="tag success-tag">
            <div class="tag-name">成功上传：</div>
            <div class="tag-value">{{ successCount }}</div>
          </div>
          <div class="tag">
            <div class="tag-name">总大小：</div>
            <div class="tag-value">{{ sizeCount }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

const { fileList } = defineProps({
  fileList: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['removeFile', 'addFile', 'updateFile'])

const fileCount = computed(() => {
  return fileList.length
})

const successCount = computed(() => {
  let count = 0
  for (const item of fileList) {
    if (item['status'] === '上传成功') {
      count++
    }
  }
  return count
})

const sizeCount = computed(() => {
  let size = 0
  for (const item of fileList) {
    size += item['size']
  }
  return computeSize(size)
})

const computeSize = (size) => {
  if (size < 1024) {
    const sizeCount = size + 'B'
    return sizeCount
  }

  if (size >= 1024 && size < 1024 * 1024) {
    const sizeCount = (size / 1024).toFixed(2) + 'KB'
    return sizeCount
  }

  if (size >= 1024 * 1024 && size < 1024 * 1024 * 1024) {
    const sizeCount = (size / 1024 / 1024).toFixed(2) + 'MB'
    return sizeCount
  }
  return '0B'
}

const handleRemoveFile = (index) => {
  console.log('handleRemoveFile', index)
  emit('removeFile', index)
}

const updateFile = () => {
  console.log('updateFile')
  emit('updateFile')
}

const handleSelectFile = async () => {
  const options = {
    multiple: true
  }

  console.log('handleSelectFile')
  const res = await window['showOpenFilePicker'](options)
  console.log(res)
  for await (const item of res) {
    const file = await item.getFile()
    emit('addFile', file)
  }
}

const handleSelectDir = async () => {
  console.log('handleSelectDir')

  const res = await window['showDirectoryPicker']()
  console.log(res)
  addFile(res)
}

const addFile = async (entryDir) => {
  for await (const entry of entryDir.values()) {
    console.log(entry)
    if (entry.kind === 'file') {
      const file = await entry.getFile()
      emit('addFile', file)
    } else if (entry.kind === 'directory') {
      addFile(entry)
    }
  }
}
</script>

<style lang="scss" scoped>
.update-file-list-container {
  padding: 20px;
  .update-file-list {
    .update-file-list-header {
      display: flex;
      margin-bottom: 20px;
      & > div {
        margin-right: 20px;
        color: #fff;
        padding: 10px 20px;
        background-color: #3a0101;
        user-select: none;
        cursor: pointer;
      }
    }
    .update-file-list-body {
      table {
        color: #333;
        width: 100%;
        border-collapse: collapse;

        .process-bar {
          margin-right: 10px;
          overflow: hidden;
        }

        th,
        td {
          width: 20%;
          padding: 15px;
          text-align: left;
          border-bottom: 1px solid #ddd;
          .delete-btn {
            width: 80px;
            color: #da0e0e;
            user-select: none;
            &:hover {
              cursor: pointer;
            }
          }
        }
        th {
          background-color: #f2f2f2;
        }
        tr:hover {
          background-color: #f2f2f2;
        }
      }
      .update-file-list-no-data {
        width: 100%;
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      margin-bottom: 20px;
    }
    .update-file-list-footer {
      .tags {
        display: flex;
        .tag {
          display: flex;
          margin-right: 10px;
          border: 1px solid #ccc;
          padding: 5px;
        }
        .success-tag {
          color: #da0e0e;
        }
      }
    }
  }
}
</style>
